<template>
  <view class="info-container">
    <view class="info-list">
      <view class="info-item" @tap="goToAvatar">
        <text class="label">头像</text>
        <view class="value-box">
          <image class="avatar" :src="userInfo.avatar || defaultAvatar" mode="aspectFill"></image>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>

      <view class="info-item" @tap="goToEdit">
        <text class="label">昵称</text>
        <view class="value-box">
          <text class="value">{{ userInfo.nickName }}</text>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>

      <view class="info-item">
        <text class="label">用户名</text>
        <view class="value-box">
          <text class="value">{{ userInfo.userName }}</text>
        </view>
      </view>

      <view class="info-item">
        <text class="label">手机号码</text>
        <view class="value-box">
          <text class="value">{{ userInfo.phonenumber || '未设置' }}</text>
        </view>
      </view>

      <view class="info-item">
        <text class="label">邮箱</text>
        <view class="value-box">
          <text class="value">{{ userInfo.email || '未设置' }}</text>
        </view>
      </view>

      <view class="info-item">
        <text class="label">所属部门</text>
        <view class="value-box">
          <text class="value">{{ userInfo.dept?.deptName || '未设置' }}</text>
        </view>
      </view>

      <view class="info-item">
        <text class="label">角色</text>
        <view class="value-box">
          <text class="value">{{ roleGroup || '未设置' }}</text>
        </view>
      </view>

      <view class="info-item">
        <text class="label">岗位</text>
        <view class="value-box">
          <text class="value">{{ postGroup || '未设置' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserProfile } from '@/api/system/user'
import defaultAvatar from '@/static/images/profile.jpg'

export default {
  data() {
    return {
      userInfo: {},
      defaultAvatar,
      roleGroup: '',
      postGroup: ''
    }
  },
  onShow() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      try {
        const res = await getUserProfile()
        if (res.code === 200) {
          this.userInfo = res.data.user || {}
          this.roleGroup = res.data.roleGroup || ''
          this.postGroup = res.data.postGroup || ''
        }
      } catch (error) {
      }
    },
    goToAvatar() {
      uni.navigateTo({
        url: '/pages/mine/avatar/index'
      })
    },
    goToEdit() {
      uni.navigateTo({
        url: '/pages/mine/info/edit'
      })
    }
  }
}
</script>

<style lang="scss">
.info-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20rpx;

  .info-list {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;

    .info-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx 24rpx;
      border-bottom: 2rpx solid #f0f2f5;

      &:last-child {
        border-bottom: none;
      }

      .label {
        font-size: 28rpx;
        color: #606266;
      }

      .value-box {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12rpx;

        .value {
          font-size: 28rpx;
          color: #2c3e50;
          text-align: right;
        }

        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 40rpx;
        }
      }
    }
  }
}
</style>
